﻿<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3表单输入文字提示上浮代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/style.css">

</head>
<body>
  
<section>
  <h1>CSS表单交互</h1>
  
  <form id="basic-form">
    <div class="form-group">
      <input type="text" id="basic-form-first-name" placeholder="名称">
      <label for="basic-form-first-name">名称</label>
    </div>
    <div class="form-group">
      <input type="text" id="basic-form-last-name" placeholder="手机号码">
      <label for="basic-form-last-name">手机号码</label>
    </div>
    <div class="form-group">
      <input type="email" id="basic-form-email" placeholder="邮箱">
      <label for="basic-form-email">邮箱<span class="error">输入一个有效的电子邮件地址</span></label>
    </div>
    <button id="basic-form-submit" type="submit">发送信息</button>
  </form>
</section>


</body>
</html>